<template>
<div id="resetAgain">
     <!--后退-->
      <img class="back" src="../../assets/task/back.png" alt="" onclick="history.go(-1)">
      <div class="pswS">
              <p>请再次输入四位交易密码</p> 
              <section>
                  <input ref="input1" v-model="iput1" maxlength="1" v-focus type="text">
                  <input ref="input2" v-model="iput2" maxlength="1" type="text">
                  <input ref="input3" v-model="iput3" maxlength="1" type="text">
                  <input ref="input4" v-model="iput4" maxlength="1" type="text">
              </section> 
      </div>
      <p class="next" @click="confirmSure">确定</p>
</div>
</template>
<script>
export default {
  data () {
    return {
        iput1:'',
        iput2:'',
        iput3:'',
        iput4:'',
    }
  },
  watch:{
      iput1: function (val) {
        if(val!=''){
          this.$refs.input1.blur();
          this.$refs.input2.focus();
        }
      },
      iput2: function (val) {
        if(val!=''){
          this.$refs.input2.blur();
          this.$refs.input3.focus();
        }
      },
      iput3: function (val) {
        if(val!=''){
          this.$refs.input3.blur();
          this.$refs.input4.focus();
        }
      },
      iput4: function (val) {
        if(val!=''){
          this.$refs.input4.blur();
        }
      }
    },
     directives: {
      focus: {
        // 自定义指令聚焦
        inserted: function (el) {
          el.focus()
        }
      }
    },
  created(){
      console.log(this.$route.params)
  },
  methods:{
      confirmSure(){
           const resetPsw = this.iput1+this.iput2+this.iput3+this.iput4;
          if(this.$route.params.data.payPassword==resetPsw){
             if(this.$route.params.data.common1){
                console.log('PPPPPPPPPPPPPPPPPPPPPp')
                this.$api.confirmReal(this.$route.params.data).then((res)=>{
                if(res.code=='000000'){
                    console.log('fffffffffff')
                    this.$router.push({path: '/cueMsg'})
                }
              })
              }
              if(!this.$route.params.data.common1){
                this.$api.changeBussPsw(this.$route.params.data).then((res)=>{
                    if(res.code=='000000'){
                        console.log('fffffffffff')
                        this.$router.push({path: '/cueMsg'})
                    }
                })
              }
             
          }
         
        //   if(this.$route.params.data.payPassword==resetPsw){
        //       this.$api.confirmReal(this.$route.params.data).then((res)=>{
        //       if(res.code=='000000'){
        //           console.log('fffffffffff')
        //           this.$router.push({path: '/cueMsg'})
        //       }
        //   })
        //   }
      },
  }
}
</script>
<style>
#resetAgain{
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url('../../assets/me/pswbg.png');
}
#resetAgain .back{
    height:0.75rem;
    width:0.4rem;
    margin:0.9rem 0.6rem;
}
#resetAgain .pswS{
    margin:2.5rem auto;
    width:80%;
    background:#fff;
    height:12.5rem;
    box-shadow:0.1rem 0.1rem 0.5rem 0.1rem #e2e2e2;
    border-radius:13px;
}
#resetAgain .pswS > p{
    width:60%;
    height:2.25rem;
    margin:auto;
    line-height:3.5rem;
    font-size:0.8rem;
    color:#888888;
    text-align:center;
    border-bottom:1px solid #e2e2e2;
}
#resetAgain .pswS > section{
    width:80%;
    margin:3rem auto;
    font-size:1rem;
    display:flex;
    justify-content: space-around;
}
#resetAgain .pswS > section >input{
    height:3rem;
    width:3rem;
    text-align:center;
    height:3rem;
    border:1px solid #8a8a8a;
}
#resetAgain .next{
    width:50%;
    background:#29a193;
    margin:2.5rem auto;
    text-align:center;
    height:2.5rem;
    line-height:2.5rem;
    color:#fff;
    font-size:0.7rem;
    display:flex;
    justify-content: space-around;
    border-radius:13px;
}
</style>